<template>
    <ak-page-code>components</ak-page-code>
    <ak-title>AKjs前端框架</ak-title>
    <ak-main>
        <div class="module mt_2 ml_1">
            <section class="fl ml_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">使用方法</h3>
                </fieldset>
                <article class="pos_rel ovh h_35_rem bg_white">
                    <div class="plug_tabs_code wm_96">
                        <nav class="ovh press bg_white">
                            <ul class="ovh list_h_3rem nav_line_c length3">
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">HTML</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">插件调用</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">按需引入</li>
                            </ul>
                        </nav>
                        <article class="pos_rel ovh mt_2">
                            <div class="pos_rel ovh bg_white h_24_rem">
                                <section class="pos_rel ovh h_in">
                                    <!--HTML-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    <div class="module press">
    <h3 class="bg_white c_theme pl_3 line_h_36rem">品牌选择</h3>
    <ul class="list_h_36rem">
      <li class="bor_top bor_gray_ddd bg_white">
        <dl class="ovh list_h_36rem">
          <dt class="fl ovh ml_3 mr_03rem">单选：</dt>
          <dd class="fl ovh w_80">
            <fieldset class="plug_choose mt_05rem c_gray_777">
              <button type="button" class="fl pl_3 pr_3 mr_05rem border bg_white bor_rad_03rem bor_gray_ddd line_h_24rem cur_pointer" data-checked="true">戴尔</button>
              <button type="button" class="fl pl_3 pr_3 mr_05rem border bg_white bor_rad_03rem bor_gray_ddd line_h_24rem cur_pointer">三星</button>
              <button type="button" class="fl pl_3 pr_3 mr_05rem border bg_white bor_rad_03rem bor_gray_ddd line_h_24rem cur_pointer">惠普</button>
              <button type="button" class="fl pl_3 pr_3 mr_05rem border bg_white bor_rad_03rem bor_gray_ddd line_h_24rem cur_pointer">微软</button>
            </fieldset>
          </dd>
        </dl>
      </li>
      <li class="bor_top bor_gray_ddd bg_white">
        <dl class="ovh list_h_36rem">
          <dt class="fl ovh ml_3 mr_03rem">多选：</dt>
          <dd class="fl ovh w_80">
            <fieldset class="plug_choose mt_05rem c_gray_777" data-multiple="multiple">
              <button type="button" class="fl pl_3 pr_3 mr_05rem border bg_white bor_rad_03rem bor_gray_ddd line_h_24rem cur_pointer" data-checked="true">东芝</button>
              <button type="button" class="fl pl_3 pr_3 mr_05rem border bg_white bor_rad_03rem bor_gray_ddd line_h_24rem cur_pointer" data-checked="true">松下</button>
              <button type="button" class="fl pl_3 pr_3 mr_05rem border bg_white bor_rad_03rem bor_gray_ddd line_h_24rem cur_pointer">苹果</button>
              <button type="button" class="fl pl_3 pr_3 mr_05rem border bg_white bor_rad_03rem bor_gray_ddd line_h_24rem cur_pointer">联想</button>
            </fieldset>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--插件调用-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    $(function(){
        $(".plug_choose").AKjs_ChooseList({
            itemWidth: "", //自定义设置按钮宽度
            active: "bg_theme c_white bor_theme", //选中后的样式
            multi: false, //单选和多选设置（单选：false，多选：true --- 或者元素里直接加 multiple="multiple" ）
            full: false, //Choose的宽度，默认为null将自动获取Choose的宽度；
            dataKey: '', //实例化后的data键值，方便后续通过data('dataKey')取出；
            click: function(index, item) { //Choose元素点击时的回调，diabled时不发生。
                console.log("click", index, item.text());
            },
            change: function(index, item) { //choose值改变时的回调；
                console.log("change", index, item.text());
            }
        });
    });
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--按需引入-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    AKjs_Plugin("AKjs_ChooseList"); //按钮模式复选和单选功能
</textarea>
                                </section>
                            </div>
                        </article>
                    </div>
                    <fieldset class="wm_96 mt_2 mb_2">
                        <button type="button" class="plug_submit btn_h_au w_100 bg_theme c_white h_32rem">运行测试</button>
                    </fieldset>
                </article>
            </section>
            <section class="fr mr_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">效果展示</h3>
                </fieldset>
                <article class="pos_rel ova h_35_rem bg_white05">
                    <div class="plug_preview pos_rel ovh pa_2"></div>
                </article>
            </section>
        </div>
    </ak-main>

    <ak-plugin></ak-plugin>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
